<template>
  <div>
    <div>
      <div class="g-content pb-0">
        <x-form ref="formRef" v-model:model="form" inline label-placement="left">
          <x-button type="primary" style="margin-right: 10px" @click="handleAdd">添加岗位</x-button>
          <n-form-item label="岗位名称">
            <n-input v-model:value="form.operatorName" placeholder="岗位名称" clearable />
          </n-form-item>
          <x-button type="primary" @click="handleSubmit">查询</x-button>
          <x-button @click="handleRefresh">重置</x-button>
        </x-form>
      </div>
      <div class="g-content">
        <div>
          <x-data-table
            ref="tableRef"
            v-model:immediate="immediate"
            :params="paginationParams"
            :columns="columns"
            :row-key="(row) => row.id"
            row-class-name="text-sm"
            max-height="infinite"
          />
        </div>
      </div>
    </div>
    <AccountEdit v-if="modalAdd.show" :modal-data="modalAdd" @success="handleRefresh" />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, h, onMounted, reactive } from 'vue'
  import { XForm, XButton, XDataTable } from '@/components'
  import { NFormItem, NSelect, NInput, NSpace, NText, NPopconfirm, NTag } from 'naive-ui'
  import { useRouter } from 'vue-router'
  import { useStore } from '@/store'
  import AccountEdit from '@/views/system/components/AccountEdit.vue'
  const router = useRouter()
  const store = useStore()
  const props = defineProps({})
  const getProps = reactive(props)
  const tableRef = ref(null)
  const formRef = ref(null)
  const form = ref({
    accountMailbox: null,
    operatorName: null
  })
  const modalAdd = ref({
    show: false,
    row: null,
    type: 'add'
  })
  const immediate = ref(true)
  const paginationParams = computed(() => {
    return {
      actions: 'system/roleList',
      data: {
        ...form.value
      }
    }
  })
  const columns = ref([
    {
      title: '岗位名称',
      key: 'roleName',
      render(row: any) {
        return h(NSpace, { vertical: true }, () => [
          h(NText, {}, () => row.roleName),
          h(NTag, { type: 'success', size: 'small' }, () => (row.roleType === 10 ? '系统' : '自定义'))
        ])
      }
    },
    {
      title: '岗位描述',
      key: 'roleDesc'
    },
    {
      title: '岗位人数',
      key: 'accountCount'
    },
    {
      title: '创建/更新时间',
      key: 'createdAt',
      render(row: any) {
        return h(NSpace, { vertical: true }, () => [
          h(NText, {}, () => (row.roleType === 10 ? '系统' : '自定义')),
          h(NText, {}, () => row.createdAt)
        ])
      }
    },
    {
      title: '操作',
      key: 'actions',
      render(row: any) {
        return h('div', [
          row.isSuper === 1 ? '-' : null,
          row.isSuper !== 1
            ? h(XButton, { type: 'primary', text: true, onClick: () => handleEdit(row) }, { default: () => '编辑' })
            : null,
          row.roleType !== 10 && row.isSuper !== 1
            ? h(XButton, { type: 'error', text: true, onClick: () => handleDelete(row) }, { default: () => '删除' })
            : null
        ])
      }
    }
  ])

  const handleEdit = (row: any) => {
    router.push({
      name: 'EditRole',
      query: {
        type: row.roleType === 2 ? 1 : 10, // 2-自定义岗位；10-内置岗位
        roleId: row.id
      }
    })
  }
  const handleAdd = () => {
    router.push({
      name: 'EditRole',
      query: {
        type: 1
      }
    })
  }
  const handleDelete = (row: any) => {
    store.dispatch('system/getSystemRleDelete', { id: row.id }).then(() => {
      immediate.value = true
    })
  }

  const handleSubmit = () => {
    immediate.value = true
  }
  const handleRefresh = () => {
    formRef.value.resetFields()
    handleSubmit()
  }
</script>

<style lang="scss" scoped></style>
